import { Button } from "@/components/ui/button";
import { Link } from "waku";

import { getContextData } from "waku/middleware/context";
import type { PageProps } from "waku/router";
import db from "@/lib/db";
import { Progress } from "@/components/ui/progress";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

const flags: Record<string, string> = {
  th: "🇹🇭",
  en: "🇬🇧",
  zh: "🇨🇳",
  ja: "🇯🇵",
  es: "🇪🇸",
  fr: "🇫🇷",
};

export default async function HomePage(props: PageProps<"/lang/[slug]">) {
  const lessons = await getData(props.slug);
  const { user } = getContextData();
  function commit() {}

  return (
    <>
      <section>
        <h2 className="text-lg">Thai!</h2>
        {lessons.map((l) => (
          <Link key={l.id} to={`/lesson/${l.id}`}>
            <Card>
              <CardHeader>
                <CardTitle>
                  <h3>{l.name}</h3>
                </CardTitle>
                <CardDescription>
                  <p>{l.description}</p>
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Progress value={(l.position / l.count) * 100} />
              </CardContent>
            </Card>
          </Link>
        ))}
      </section>
    </>
  );
}

const getData = async (lang: string) => {
  const lessons = db.fetchLanguage(lang);

  return lessons;
};

export const getConfig = async () => {
  return {
    render: "dynamic",
  } as const;
};

async function LanguageItem({ lang }: { lang: string }) {
  return (
    <div className="flex">
      <div className="text-lg">{flags[lang] || ""}</div>
    </div>
  );
}